<div class="vtrade-container">
  <div class="watchlist-box" [@expandable]="outlookState.watchlist">
    <watchlist-mini [routeSource]="'vtrade'"></watchlist-mini>
  </div>
  <div class="main-container" [@vtradeExpand]="outlookState.watchlist">
    <div class="nav-bar">
      <div class="left-part">
        <a href="javascript:;" class="drawer-toggle" [class.active]="outlookState.watchlist === 'EXPANDED'" (click)="toggleState('watchlist')"><i class="iconfont icon-left"></i></a>
        <tab-list class="tab-list-top" [isNavTab]="false" [autoClickFirst]="true" [menuLeft]="true" [listData]="listData" (tabClick)="currentConfig = $event"></tab-list>
      </div>
      <div class="right-part">
        <search [placement]="'vtrade'"></search>
      </div>
    </div>
    <div class="main-content">
      <div class="middle-container">
        <detail-basic [quoteSource]="quoteDetailSource" [placementSource]="placeSource"></detail-basic>
        <combo-chart [withBg]="true" class="block-mini-chart no-side-border" style="height: 100%" [stockSource]="quoteDetailSource"
          [kConfig]="chartConfig" [kLists]="chartLists" [placementSource]="placeSource"></combo-chart>
        <vtrade-summary [stockSource]="stockDetailSource" (summarySource)="updateSummary($event)"></vtrade-summary>
        <vtrade-terminal [stockSource]="stockDetailSource" [focusSource]="focusSub" [summarySource]="summarySub" (onModal)="onModal($event)" (updateChart)="updateChart($event)"></vtrade-terminal>
      </div>
      <div class="right-container">
        <stock-position [updateSource]="stockDetailSource" (positionClick)="positionControl($event)"></stock-position>
        <entrust-business-combo></entrust-business-combo>
        <business-today></business-today>
      </div>
    </div>
  </div>
  <cm-modal-instance *ngIf="isShowModalTips" [heading]="modalHeading" [tips]="modalTips" [params]="modalParams"></cm-modal-instance>
</div>